<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue导航菜单</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-family: 'LiSu';
            font-size: 16px !important;
        }
    </style>
    <script>
        window.onload = function () {
            var demo = new Vue({
                el: '#app',
                data: {
                    select: '按钮1'
                },
                methods: {
                    makeActive: function (item) {
                        this.select = item;
                    }
                }
            });
        }</script>
</head>

<body>
    <div id="app">
    <div v-on:click.prevent id="btngroup" style="margin-left: 20px;margin-top: 20px" class="btn-group">
        <div v-on:click="makeActive('按钮1')" class="btn btn-primary">按钮1</div>
        <div v-on:click="makeActive('按钮2')" class="btn btn-success">按钮2</div>
        <div v-on:click="makeActive('按钮3')" class="btn btn-info">按钮3</div>
        <br>
        <p>当前选择的是:{{select}}</p>
    </div>
</div>

</body>

</html>